<template>
  <div class="box">
    <el-form
      ref="orderForm"
      :model="orderFormData"
      :validate-on-rule-change="false"
      label-width="90px"
      :rules="ruleValidate"
      @submit.native.prevent
    >
      <el-form-item label="组件名:">
        <!-- <el-input
          v-model="orderFormData.name"
          placeholder="请输入标题"
          @input="debounceHandler"
          @keyup.native.enter="debounceHandler"
        /> -->
        <span>{{ orderFormData.nodename }}</span>
      </el-form-item>
      <el-form-item label="入参:" prop="jsonStr">
        <!-- <el-input
          v-model="orderFormData.inParams"
          :autosize="{ minRows: 3, maxRows: 4 }"
          type="textarea"
          placeholder="请输入入参"
          @input="debounceHandler"
          @keyup.native.enter="debounceHandler"
        /> -->
        <b-ace-editor
          v-model="orderFormData.jsonStr"
          lang="json"
          height="200"
          theme="chrome"
          :readonly="false"
          :font-size="12"
          @keyup.native.enter="handleAddOrder"
        />
      </el-form-item>
      <el-form-item label="出参:">
        <el-input
          v-model="orderFormData.outParams"
          :autosize="{ minRows: 3, maxRows: 4 }"
          type="textarea"
          placeholder="请输入出参"
          @input="debounceHandler"
          @keyup.native.enter="debounceHandler"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button type="text" @click="handleViewLog">
          查看日志链接
        </el-button>
      </el-form-item>
    </el-form>
    <viewLogDialog ref="viewLogDialog" />
  </div>
</template>

<script>
import { debounce, cloneDeep } from 'lodash';
import viewLogDialog from '../viewLogDialog.vue';

export default {
  name: 'EditDragNode',
  components: {
    viewLogDialog,
  },
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    const checkObj = (rule, value, callback) => {
      try {
        if (JSON.parse(value.trim())) {
          callback();
        }
      } catch (e) {
        callback(new Error('不是标准json'));
      }
    };
    return {
      mapVisible: false,
      mode: '',
      orderFormData: {
        nodename: '',
        inParams: '',
        outParams: '',
        label: '',
        status: '',
        jsonStr: '',
      },
      ruleValidate: {
        jsonStr: [
          { validator: checkObj, trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    isVisibile: {
      get() {
        return this.dialogVisibleAddOrder;
      },
      set() {},
    },
  },
  watch: {
    formData: {
      handler(val) {
        // let sourForm=this.$options.data.orderFormData;
        Object.assign(this.orderFormData, val);
        const jsonData = {
          title: '测试json数据',
          child: [
            {
              title: '子项名称1',
              desc: '子项描述1',
            },
            {
              title: '子项名称2',
              desc: '子项描述2',
            },
          ],
        };
        // JSON.stringify()的三个参数 https://blog.csdn.net/weixin_43723051/article/details/123568258
        this.orderFormData.jsonStr = JSON.stringify(jsonData, null, 2);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    handleViewLog() {
      this.$refs.viewLogDialog.show(this.orderFormData);
    },
    // 当关闭添加命令弹窗
    onAddOrderDialgClose() {
      const data = this.$options.data();
      this.orderFormData = data.orderFormData;
      this.$emit('cancelorder');
    },
    // 添加行为
    handleAddOrder() {
      // eslint-disable-next-line consistent-return
      this.$refs.orderForm.validate(async (valid) => {
        if (valid) {
          this.$emit('confirmorder', cloneDeep(this.orderFormData));
        } else {
          return false;
        }
      });
    },

    handlerChange() {
      this.$emit('updateCellData', cloneDeep(this.orderFormData));
    },
    debounceHandler: debounce(function () {
      this.handlerChange();
    }, 1000),
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  // color: #2cfeff;
}
</style>
